<template>
  <view class="container">
    <view class="search d-rn d-ac">
      <image src="../../static/img/search.png" mode=""></image>
      <input
        type="text"
        :placeholder="$t('Please_enter_name')"
        @blur="search"
        placeholder-style="color:#CCCCCC;"
        v-model="type.createdName"
      />
    </view>
    <view class="content">
      <!-- <view class="content-tab d-rn d-ac d-ja">
				<view class="content-tab-one d-cw d-ac d-jc" v-for="(item,index) in 4" :key="index" @click="handleNav(index)">
					<text :class="navSts == index?'active':'outactive'">{{!index?'待审批':index==1?'审核中':index==2?'同意':'拒绝'}}</text>
					<text v-if="navSts == index"></text>
				</view>
			</view> -->
      <view class="content-select d-rn d-ac d-jb">
        <view class="content-select-one d-rn d-ac d-jc">
          <picker
            @change="bindPickerChangeSts"
            :range="stsList"
            range-key="dictLabel"
            class="picker"
          >
            <view class="d-rn d-ac d-jc">
              <view class="picker-con d-cn d-jc d-ac">
                <view class="uni-input one-txt-cut" v-if="stateName"
                  >{{ stateName }}
                </view>
                <view class="uni-input one-txt-cut" v-else>{{ $t('all_status') }}</view>
              </view>
              <image
                src="../../static/img/bottom.png"
                mode=""
                class="bottom"
              ></image>
            </view>
          </picker>
        </view>
        <view class="content-select-shu"> | </view>
        <view class="content-select-one">
          <picker
            @change="bindPickerChange"
            :range="hostList"
            range-key="dictLabel"
            class="picker"
          >
            <view class="d-rn d-ac d-jc">
              <view class="picker-con d-cn d-jc">
                <view class="uni-input one-txt-cut" v-if="approvalTypeName"
                  >{{ approvalTypeName }}
                </view>
                <view class="uni-input one-txt-cut" v-else>{{ $t('all_types') }}</view>
              </view>
              <image
                src="../../static/img/bottom.png"
                mode=""
                class="bottom"
              ></image>
            </view>
          </picker>
        </view>
        <view class="content-select-shu"> | </view>
        <view class="content-select-two d-rn d-ac d-jc">
          <view
            class="content-select-top-one-right d-rn d-ac"
            @click="handleOpenTime"
          >
            <text v-if="type.createTime">{{ type.createTime }}</text>
            <text v-else>{{ $t('time') }}</text>
            <image
              src="../../static/img/bottom.png"
              mode=""
              class="bottom"
            ></image>
          </view>
        </view>
      </view>
    </view>

    <view class="list">
      <view
        class=""
        v-for="(item, index) in shenpiList"
        :key="index"
        v-if="shenpiList && shenpiList.length"
        @click="handleGo(item)"
      >
        <view class="list-one">
          <view class="list-one-one">
            <view class="list-one-one-title d-rn d-ac d-jb">
              <view class="list-one-one-title-left d-rn d-ac">
                <text>{{ item.employerName }}的{{ item.typeName }}</text>
                <text
                  ><span v-if="item.positionName">{{ item.positionName }}</span
                  ><span v-if="item.positionName && item.employerDeptName"
                    >/</span
                  ><span v-if="item.employerDeptName">{{
                    item.employerDeptName
                  }}</span></text
                >
              </view>
              <view class="list-one-one-title-right">
                <text>{{ item.createTime }}</text>
              </view>
            </view>
            <view
              class="list-one-one-content d-cn"
              v-if="(item.type == '1' || item.type == '2') && item.jqEmployerLeaveDTO"
            >
              <text
                >{{item.jqEmployerLeaveDTO.vacationName}}
                <text v-if="item.jqEmployerLeaveDTO.leaveDays"
                  >{{ item.jqEmployerLeaveDTO.leaveDays }} {{ $t('days') }} </text
                >
								</text
              >
							
              <text v-if="item.jqEmployerLeaveDTO.leaveStartDate"
                >{{$t('start_time')}}：{{ item.jqEmployerLeaveDTO.leaveStartDate }}
								<text style="margin-left: 10px;" v-if="item && item.jqEmployerLeaveDTO && (item.jqEmployerLeaveDTO.leaveStartDateType == 2 && item.jqEmployerLeaveDTO.leaveEndDateType == 2)">前半天</text>
								<text style="margin-left: 10px;" v-if="item && item.jqEmployerLeaveDTO && (item.jqEmployerLeaveDTO.leaveStartDateType == 2 && item.jqEmployerLeaveDTO.leaveEndDateType == 3)">前半天</text>
								<text style="margin-left: 10px;" v-if="item && item.jqEmployerLeaveDTO && (item.jqEmployerLeaveDTO.leaveStartDateType == 3 && item.jqEmployerLeaveDTO.leaveEndDateType == 3)">后半天</text>
								<text style="margin-left: 10px;" v-if="item  && (item.leaveStartDateType == 2 && item.leaveEndDateType == 3)">前半天</text>
								
								</text
              >
              <text v-if="item.jqEmployerLeaveDTO.leaveEndDate"
                >{{$t('end_time')}}：{{ item.jqEmployerLeaveDTO.leaveEndDate }}
								<text style="margin-left: 10px;" v-if="item && item.jqEmployerLeaveDTO && (item.jqEmployerLeaveDTO.leaveStartDateType == 2 && item.jqEmployerLeaveDTO.leaveEndDateType == 2)">前半天</text>
								<text style="margin-left: 10px;" v-if="item && item.jqEmployerLeaveDTO && (item.jqEmployerLeaveDTO.leaveStartDateType == 3 && item.jqEmployerLeaveDTO.leaveEndDateType == 3)">后半天</text>
								<text style="margin-left: 10px;" v-if="item && item.jqEmployerLeaveDTO && (item.jqEmployerLeaveDTO.leaveStartDateType == 2 && item.jqEmployerLeaveDTO.leaveEndDateType == 3)">后半天</text>
								
								
								</text
              >
              <text class="txt-cut" v-if="item.jqEmployerLeaveDTO.leaveReason"
                >{{$t('reason')}}：{{ item.jqEmployerLeaveDTO.leaveReason }}</text
              >
              <image
                :src="item.jqEmployerLeaveDTO.leaveFile.replace('http://','https://')"
                mode="aspectFit"
                style="width: 40%"
                v-if="item.jqEmployerLeaveDTO.leaveFile"
                @tap.stop="handlePreviewImage(item.jqEmployerLeaveDTO.leaveFile.replace('http://','https://'))"
              ></image>
              <!-- <text style="color: #1c77d4;cursor: pointer;">{{item.leaveFile}}</text> -->
            </view>
            <view class="list-one-one-content d-cn" v-if="item.type == '3'">
              <text v-if="item.attendanceCardDTO.punchDate"
                >{{$t('reissue_card_time')}}：{{ item.attendanceCardDTO.punchDate }}</text
              >
              <text v-if="item.attendanceCardDTO.punchForm"
                >{{$t('reissue_card_type')}}：{{
                  item.attendanceCardDTO.punchForm == 1 ? $t('clock_in_card') : $t('clock_out_card')
                }}</text
              >
              <text v-if="item.attendanceCardDTO.punchTime"
                >{{$t('reissue_card_time')}}：{{ item.attendanceCardDTO.punchTime }}</text
              >
              <text class="txt-cut" v-if="item.attendanceCardDTO.remark"
                >{{$t('reason')}}：{{ item.attendanceCardDTO.remark }}</text
              >
              <image
                :src="item.attendanceCardDTO.pic.replace('http://','https://')"
                mode="aspectFit"
                style="width: 40%"
                v-if="item.attendanceCardDTO && item.attendanceCardDTO.pic"
                @tap.stop="handlePreviewImage(item.attendanceCardDTO.pic.replace('http://','https://'))"
              ></image>
            </view>
            <view class="list-one-one-content d-cn" v-if="item.type == '5'">
              <text v-if="item.overtimeApplyDTO && item.overtimeApplyDTO.createTime"
                >{{$t('apply_time')}}：{{ item.overtimeApplyDTO.createTime }}</text
              >
              <text v-if="item.overtimeApplyDTO && item.overtimeApplyDTO.duration"
                >{{$t('actual_overtime_hours')}}：{{ item.overtimeApplyDTO.duration }}{{ item.overTimeUnit }}</text
              >
              <text v-if="item.overtimeApplyDTO && item.overtimeApplyDTO.applyTime"
                >{{$t('apply_overtime_hours')}}：{{ item.overtimeApplyDTO.applyTime }}{{ item.overTimeUnit }}</text
              >
              <text class="txt-cut" v-if="item.overtimeApplyDTO && item.overtimeApplyDTO.remark"
                >{{$t('reason')}}：{{ item.overtimeApplyDTO.remark }}</text
              >
        
              <image
                :src="item.overtimeApplyDTO.pic.replace('http://','https://')"
                mode="aspectFit"
                style="width: 40%"
                v-if="item.overtimeApplyDTO && item.overtimeApplyDTO.pic"
                @tap.stop="handlePreviewImage(item.overtimeApplyDTO.pic.replace('http://','https://'))"
              ></image>
            </view>
            <view class="list-one-one-content d-cn" v-if="item.type == '4'">
              <text v-if="item.modifyPunchDTO.punchDate"
                >{{$t('clock_in_date')}}：{{ item.modifyPunchDTO.punchDate }}</text
              >
              <text v-if="item.modifyPunchDTO.punchType"
                >{{$t('clock_in_time')}}：{{ item.modifyPunchDTO.punchType == 1?'上班卡':item.modifyPunchDTO.punchType== 2?'下班卡':'-' }}</text
              >
              <text v-if="item.modifyPunchDTO.changeTime"
                >{{$t('modify_time1')}}：{{ item.modifyPunchDTO.changeTime }}</text
              >
              <text class="txt-cut" v-if="item.modifyPunchDTO.remark"
                >{{$t('reason')}}：{{ item.modifyPunchDTO.remark }}</text
              >
              <image
                :src="item.modifyPunchDTO.pic.replace('http://','https://')"
                mode="aspectFit"
                style="width: 40%"
                v-if="item.modifyPunchDTO && item.modifyPunchDTO.pic"
                @tap.stop="handlePreviewImage(item.modifyPunchDTO.pic.replace('http://','https://'))"
              ></image>
            </view>
            <view class="list-one-one-sts d-rn d-ac d-jb">
              <text></text>
              <!-- <text>{{!item.state?'待审批':item.state==1?'审核中':item.state==2?'同意':item.state==3?'拒绝':''}}</text> -->
              <text v-if="item.status == 0" :style="{'color': item.reviewerType!=2?'#ff4b50':'lightgreen'}" >{{ item.reviewerType==2?$t('cc'):$t('waiting_approval') }}</text>
              <text v-if="item.status == 1" style="color: dodgerblue"
                >{{ $t('under_review') }}</text
              >
              <text v-if="item.status == 2" style="color: lightgreen"
                >{{$t('agree')}}</text
              >
              <text v-if="item.status == 3" style="color: orangered">{{ $t('reject') }}</text>
              <text v-if="item.status == 4" style="color: dodgerblue"
                >{{ $t('canceled') }}</text
              >
            </view>
          </view>
        </view>
      </view>
      <view v-if="shenpiList.length == 0" style="margin-top: 200rpx">
        <u-empty mode="data"></u-empty>
      </view>
    </view>

    <view class="">
      <u-datetime-picker
        :show="showTime"
        v-model="value"
        mode="date"
        @cancel="handleCancel"
        @confirm="handleChooseTime"
      ></u-datetime-picker>
    </view>
  </view>
</template>

<script>
var _self;
import { getApplyList, getPersonHolidays } from "../../api/index.js";
import { getDictionary } from "../../api/common.js";
export default {
  data() {
    return {
      showTime: false,
      value: Number(new Date()),
      updateTime: this.$t('time'),
      stsList: [
        {
          dictLabel: this.$t('all'),
          dictValue: "",
        },

        {
          dictLabel: this.$t('pending_review'),
          dictValue: 0,
        },
        {
          dictLabel: this.$t('under_review'),
          dictValue: 1,
        },
        {
          dictLabel: this.$t('approved'),
          dictValue: 2,
        },
        {
          dictLabel: this.$t('rejected'),
          dictValue: 3,
        },
        {
          dictLabel: this.$t('canceled'),
          dictValue: 4,
        },
      ],
      hostList: [],
      type: {
        state: "",
        createdName: null,
        pageNum: 1,
        pageSize: 10,
        createTime: null,
        type: null,
      },
      approvalTypeName: "",
      stateName: "",
      navSts: 0,
      shenpiList: [],
      hasPage: false,
      total: 0,
      totalPage: 0,
    };
  },
  onLoad() {
    _self = this;
  },
  onShow() {
    // 审批状态
    // this.getDictionary()
    //审批类型
    this.getDictEvent();

    _self.getgetApplyList();
  },
  methods: {
    handlePreviewImage(src){
      uni.previewImage({
        urls: [src]
      })
    },
    //审批状态
    // getDictionary() {
    // 	getDictionary('approval_status').then(res => {
    // 		if (res.code == 200) {
    // 			this.stsList = res.data
    // 		}
    // 	})
    // },
    //审批类型
    getDictEvent() {
      getDictionary("approval_event").then((res) => {
        if (res.code == 200) {
          this.hostList = res.data;
        }
      });
    },
    bindPickerChange(e) {
      _self.type.pageNum = 1;
      _self.hasPage = false;
      _self.approvalTypeName = _self.hostList[e.detail.value].dictLabel;
      _self.type.type = _self.hostList[e.detail.value].dictValue;
      _self.getgetApplyList();
    },
    bindPickerChangeSts(e) {
      _self.type.pageNum = 1;
      _self.hasPage = false;
      _self.type.state = _self.stsList[e.detail.value].dictValue;
      _self.stateName = _self.stsList[e.detail.value].dictLabel;
      _self.getgetApplyList();
    },
    handleNav(index) {
      _self.hasPage = false;
      _self.type.pageNum = 1;
      _self.navSts = index;
      _self.type.state = index;
      _self.getgetApplyList();
    },

    getgetApplyList() {
      _self.$commonFun.sLoad();
      let data = {
        pageSize: 999,
        pageNum: 1,
        employeeName: this.type.createdName,
        status: this.type.state,
        type: this.type.type,
        dateStart: this.type.createTime,
        dateEnd: this.type.createTime,
      };
      getApplyList(data).then((res) => {
				console.log('res',res)
        if (res.code == 200 && res.data.records && res.data.records.length) {
					 // this.$set(this, "shenpiList", res.data.records);
        
          this.$set(this, "shenpiList", res.data.records.filter(v=>{
              //请假申请 加班申请
            if(v.type!==3 && (!v.jqEmployerLeaveDTO || !v.overtimeApplyDTO)){
              return v
            }
            // 考勤补卡
            if(v.type==3){
              return v
            }
          } ));
					// this.$set(this, "shenpiList", res.data.records);
          // if(_self.type.pageNum == 1){
          // 	_self.shenpiList = res.data.records;
          // }else{
          // 	_self.shenpiList = [..._self.shenpiList,...res.data.records];
          // }
          // _self.total = res.total;
          // _self.totalPage = _self.type.pageNum * _self.pageSize
          // if (_self.totalPage >= res.total) {
          // 	_self.hasPage = false
          // } else { 
          // 	_self.hasPage = true
          // }
        }
        uni.hideLoading();
      });
    },
    handleOpenTime() {
      _self.showTime = true;
    },

    handleChooseTime(e) {
      _self.type.pageNum = 1;
      _self.showTime = false;
      _self.hasPage = false;
      _self.type.createTime = _self.$commonFun.timestampToTimeB(e.value);
      console.log(e, 2);
      // _self.type.createTime =  e.detail.value
      _self.getgetApplyList();
    },
    handleCancel() {
      _self.showTime = false;
    },
    handleGo(item) {
      _self.$commonFun.goUrl(1, "../approvalDetails/index", item);
    },

    search() {
      _self.type.pageNum = 1;
      _self.getgetApplyList();
    },
  },
  onReachBottom() {
    if (_self.hasPage) {
      _self.type.pageNum++;
      _self.hasPage = false;
      _self.getgetApplyList();
    }
  },
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}

.container {
  width: 100%;

  .search {
    width: 90%;
    margin: 20rpx auto;
    background-color: #ffffff;
    border-radius: 2em;
    padding: 18rpx 34rpx;
    box-sizing: border-box;

    image {
      width: 28rpx;
      height: 28rpx;
      min-height: 28rpx;
      min-width: 28rpx;
      margin-right: 20rpx;
    }

    input {
      width: 100%;
      flex: 1;
      font-size: 26rpx;
      color: #cccccc;
    }
  }

  .content {
    width: 100%;
    background-color: #ffffff;

    &-tab {
      padding: 24rpx 0;
      box-sizing: border-box;
      position: relative;
      border-bottom: 1px solid #f5f5f5;

      text:nth-of-type(1) {
        font-size: 30rpx;
      }

      text:nth-of-type(2) {
        width: 138rpx;
        height: 4rpx;
        background-color: #fdb911;
        position: absolute;
        top: 93%;
      }

      .active {
        color: #333333;
        font-weight: 500;
      }

      .outactive {
        color: #999999;
      }
    }

    &-select {
      &-one {
        width: 24%;
        padding: 22rpx 0;
        box-sizing: border-box;

        .bottom {
          width: 12rpx;
          height: 7rpx;
          margin-left: 10rpx;
        }
      }

      &-shu {
        color: #eeeeee;
      }

      &-two {
        width: 56%;
        padding: 22rpx 0;
        box-sizing: border-box;

        .bottom {
          width: 12rpx;
          height: 7rpx;
          margin-left: 10rpx;
        }
      }
    }
  }

  .form {
    width: 100%;
    background-color: #ffffff;
    margin-top: 20rpx;

    &-one {
      padding: 25rpx;
      box-sizing: border-box;
      border-bottom: 1px solid #f5f5f5;

      .text {
        font-size: 28rpx;
        color: #6c6c6c;
      }

      .text2 {
        font-size: 28rpx;
      }

      .uni-input {
        font-size: 28rpx;
      }
    }

    &-two {
      padding: 25rpx;
      box-sizing: border-box;
      border-bottom: 1px solid #f5f5f5;

      text {
        font-size: 28rpx;
        color: #6c6c6c;
      }

      input {
        font-size: 28rpx;
        color: #cccccc;
        margin-top: 16rpx;
      }
    }
  }

  .list {
    width: 94%;
    margin: 24rpx auto;

    &-one {
      background-color: #ffffff;
      padding: 24rpx;
      box-sizing: border-box;
      margin-bottom: 24rpx;
      border-radius: 12rpx;

      &-one {
        &-title {
          margin-bottom: 16rpx;

          &-left {
            text:nth-of-type(1) {
              font-size: 30rpx;
              // font-weight: bold;
              color: #333333;
              margin-right: 20rpx;
            }

            text:nth-of-type(2) {
              padding: 6rpx;
              box-sizing: border-box;
              font-size: 20rpx;
              font-weight: bold;
              color: #ff8f1f;
              background-color: #ffefdf;
              border-radius: 12rpx;
            }
          }

          &-right {
            text {
              color: #cccccc;
              font-size: 24rpx;
            }
          }
        }

        &-content {
          padding-bottom: 24rpx;
          border-bottom: 1px dashed #d2d2d2;

          text {
            margin-bottom: 10rpx;
            color: #999999;
          }
        }

        &-sts {
          padding-top: 24rpx;
          box-sizing: border-box;

          text {
            font-weight: bold;
          }

          .activetext {
            color: #ffffff;
          }
        }
      }
    }
  }
}
</style>
